<div class="listHeader">
    <div class="dt">
        <img src={{playList.coverImgUrl}}>
        <div class="introduce">
            <h2 style="color: #fff;font-weight: bold;">{{playList.name}}</h2>
            <span>{{playList.description}}</span>
        </div>
    </div>
    <button nz-button (click)="backToHome()">{{'dts.back'|translate}}</button>
</div>

<div class="songs">
    <nz-list nzItemLayout="horizontal">
        <nz-list-item *ngFor="let item of songs">
          <nz-list-item-meta
            nzAvatar={{item.al.picUrl}}
            nzDescription={{item.al.name}}
          >
            <nz-list-item-meta-title>
              <a>{{ item.name }}</a>
            </nz-list-item-meta-title>
          </nz-list-item-meta>
          <ul nz-list-item-actions>
            <nz-list-item-action><span class="playSong" (click)="playSong(item.id);getSongUrl();play()" style="cursor: pointer;"><i nz-icon nzType="notification" nzTheme="outline"></i>{{'dts.play'|translate}}</span></nz-list-item-action>
          </ul>
        </nz-list-item>
        <nz-list-empty *ngIf="songs.length === 0"></nz-list-empty>
      </nz-list>
</div>


<div class="load">
    <button nz-button (click)="getSongs(20)">{{'dts.more'|translate}}</button>
    <button nz-button (click)="getSongs(songId.length)">{{'dts.all'|translate}}</button>
</div>
    